<template>
  <div class='home-container'>
    <van-nav-bar style="background-color: #3296fa;">
      <van-button class="search-btn" slot="title" type="info" size="small" round icon="search">搜索</van-button>
    </van-nav-bar>
    <!-- 标签页 -->
    <van-tabs v-model="active" animated swipeable class="channel-tabs">
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
      <div slot="nav-right" class="hamburger-btn">
        <van-icon name="apps-o" />
      </div>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'homeIndex',
  data () {
    return {
      active: 0
    }
  },
  components: {},
  methods: {},
  created () {},
  mounted () {}
}
</script>

<style lang='less' scoped>
.home-container {
  /deep/ .van-nav-bar__title {
    // 为啥不生效
    max-width: unset;
  }
  .search-btn {
    width: 550px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }
  .van-nav-bar .van-icon {
    color: #fff;
  }

  /deep/ .channel-tabs {
    .van-tab {
      min-width: 200px;
      height: 82px;
      border-right: 1px soild #edeff3;
      font-size: 30px;
      color: #777;
    }
    .van-tab--active {
      color: #333;
    }
    .van-tabs__line {
      width: 31px;
      height: 6px;
      background-color: #3296fa;
      margin-bottom: 8px;
    }

    .hamburger-btn {
      position: fixed;
      display: flex;
      justify-content: center;
      align-items: center;
      right: 0;
      width: 66px;
      height: 82px;
      background-color: #fff;
      opacity: 0.902;

      .van-icon {
        font-size: 43px;
      }
    }
  }
}
</style>
